<!-- 部门树 -->
<template>
  <el-card shadow="never">
    <el-input v-model="deptName" placeholder="部门名称" clearable>
      <template #prefix>
        <i-ep-search />
      </template>
    </el-input>

    <el-tree ref="deptTreeRef" class="mt-2" :data="deptList"
      :props="{ children: 'children', label: 'name', disabled: '' }" :expand-on-click-node="false"
      :filter-node-method="handleFilter" default-expand-all @node-click="handleNodeClick" />
  </el-card>
</template>

<script setup lang="ts">
import DeptAPI from "@/api/dept"
import { buildTree } from "@/utils"
const props = defineProps({
  modelValue: {
    type: [Number],
    default: undefined,
  },
})

const deptList = ref<OptionType[]>() // 部门列表
const deptTreeRef = ref(ElTree) // 部门树
const deptName = ref() // 部门名称

const emits = defineEmits(["node-click"])

const deptId = useVModel(props, "modelValue", emits)

watchEffect(
  () => {
    deptTreeRef.value.filter(deptName.value)
  },
  {
    flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
  }
)

/** 部门筛选 */
function handleFilter(value: string, data: any) {
  if (!value) {
    return true
  }
  return data.name.indexOf(value) !== -1
}

/** 部门树节点 Click */
function handleNodeClick(data: { [key: string]: any }) {
  deptId.value = data.dept_id
  emits("node-click", deptId.value)
}

onBeforeMount(() => {
  DeptAPI.query().then((res) => {
    if (res.status === 200) {
      deptList.value = buildTree(res.data, "dept_id", "pid")
      console.log(deptList.value)
    }
  })
})
</script>
